<template>
    <div class="LeftContent scroll">
        <a-collapse v-model:activeKey="store.tree.open" :bordered="false" ghost>
            <a-collapse-panel :key="index" :header="item.title" class="panel" v-for="(item,index) in store.tree.data">
                <Item v-for="(child,index) in item.children" :item="child"></Item>
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import Item from './TreeItem.vue';
import { useStore } from '../../libs/store'
const store = useStore();

</script>
<style lang="less" scoped>
.LeftContent {
    position: absolute;
    top: 50px;
    bottom: 0px;
    left: 0;
    right: 0;
    padding: 0 0 100px 0;
}
.panel {
    background:transparent;
    border-radius: 0;
    border: 0;
    overflow: hidden;
    user-select: none;
}
:deep(.ant-collapse > .ant-collapse-item > .ant-collapse-header) {
    color: #999;
    padding: 8px 10px;
}
:deep(.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow) {
    font-size: 10px;
    vertical-align: 0px;
}
</style>